<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="../css/bootstrap-table.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js"></script>
    <style>
        .chang{
            width: 40%;
            display: inline-block;
            text-align:right;
        }
        .dchang{
            width: 50%;
            display: inline-block;
        }
        .aa{
            display: inline-block;
            width: 50%;
        }
        .dropdownbox{
            width: 60%;
        }
        .ichang{
            width: 60%;
        }
    </style>
</head>
<body>
<div class="row">
    <div class="col">
        请选择产品I级分类:
        <select id="one" class="form-control">
            <option value="">请选择</option>
            <option>电子</option>
        </select>
    </div>
    <div class="col">
        请选择产品II级分类:
        <select id="tow" class="form-control">
            <option value="">请选择</option>
            <option>计算机</option>
        </select>
    </div>
    <div class="col">
        请选择产品III级分类:
        <select id="throws" class="form-control">
            <option value="">请选择</option>
            <option >服务器</option>
        </select>
    </div>
    <div class="col">
        <button onclick="f()" class="btn btn-primary" style="margin-top: 21px">查询</button>
    </div>
</div>
<hr/>
<div>
    <table id="tab"></table>
</div>

<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-xl" >
        <div class="modal-content" >

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">产品登记</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body" style="background-color: darkgray;">
                <div style="width: 100%;text-align: right">
                    <button type="button" onclick="notmaterial()" class="btn btn-primary btn-sm">不通过</button>
                    <button type="button" onclick="material()" class="btn btn-primary btn-sm">通过</button>
                    <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">返回</button>
                </div>
                <div style="height: 90%;border: 1px solid black;background-color: white;display: flex;flex-direction: column">
                    <h4 style="text-align: center;margin-top: 20px">物料组成设计单</h4>
                    <div  style="display: flex;margin-top: 5px;">
                        <div style="width: 50%;display: flex">设计单编号：<span id="query_designId"></span></div>
                        <div  style="margin-left: 10px;" >设计人：<input type="text" id="designer" disabled="disabled" style="border-bottom: 1px solid #000000;border-top: 0px;border-right: 0px;border-left: 0px"></div>
                    </div>
                    <div style="display: flex;">
                        <div  style="margin-left: 10px;width: 50%;" >产品名称：<span id="productName"></span></div>
                        <div style="width: 50%;display: flex">产品编号：<span id="query_productId"></span></div>
                    </div>
                    <div style="display: flex;margin-top: 20px">
                        <table class="table table-bordered table-sm">
                            <thead>
                            <tr style="background-color: lightskyblue">
                                <td>序号</td>
                                <td>物料编号</td>
                                <td>物料名称</td>
                                <td>用途类型</td>
                                <td>描述</td>
                                <td>数量</td>
                                <td>单位</td>
                                <td>单价（元）</td>
                                <td>小计（元）</td>
                            </tr>
                            </thead>
                            <tbody id="tabMaterial">
                            </tbody>
                        </table>
                    </div>
                    <div  style="display: flex;margin-top: 5px;">
                        <div  style="margin-left: 10px;width: 50%;" >审核人：<span id="checker"></span></div>
                        <div  style="margin-left: 10px;width: 50%;" >审核时间：<span id="checkTime"></span></div>
                    </div>
                    <div style="display: flex;">
                        <div style="margin: 20px 10px;display: flex;width: 100%">
                            <div class="input-group" >
                                <div class="input-group-prepend">
                                    <span class="input-group-text">设计要求</span>
                                </div>
                                <textarea id="moduleDescribe" class="form-control" aria-label="With textarea"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 模态框底部 -->
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#tab").bootstrapTable({
            //请求方式  get请求中文会乱码，建议使用post请求
            method: 'post',
            //请求头部的设置
            contentType: 'application/json',
            //url
            url:'/design/querydesignModule',
            //设置交替行样式
            striped: true,
            //初始显示页号
            pageNumber: 1,
            //是否显示分页
            pagination: true,
            //设置是服务端分页还是客户端分页
            sidePagination: 'server',
            //页大小
            pageSize: 5,
            //分页列表
            pageList: [3, 5, 6, 10],
            //上传到服务端的参数
            queryParams: function (params) {
                return {
                    // 计算页号(当前页)
                    pageNumber: (params.offset / params.limit) + 1,
                    // 计算页大小
                    pageSize: params.limit,
                    querySearch:{
                        firstKindName:$("#one").val(),
                        secondKindName:$("#tow").val(),
                        thirdKindName:$("#throws").val(),
                        type:$("#type").val()
                    }

                };
            },
            // 定义列名
            columns: [
                {title: '设计编号', field: 'designId', align: 'center'},
                {title: '产品编号', field: 'productId', align: 'center'},
                {title: '产品名称', field: 'productName', align: 'center'},
                {title: '设计人', field: 'designer', align: 'center'},
                {title: '登记时间', field: 'registerTime', align: 'center'},
                {title: '物料总成本', field: 'costPriceSum', align: 'center'},
                {title: '操作', field: 'checkTag', align: 'center',
                    formatter:function (value,row,index){
                        var btn1 = "<button class=\"btn btn-primary  btn-sm\" data-toggle='modal' data-target='#myModal' onclick='givevalue("+JSON.stringify(row)+")'>审核</button>";
                        return btn1;
                    }
                }
            ]
        })

    })
    function f() {
        $("#tab").bootstrapTable("refresh");
    }
    function material(){
            var id=$("#query_designId").text()
            $.ajax({
                type:'POST',
                url:'/design/material',
                data:'id='+id,
                success:function (){
                    $("#tab").bootstrapTable("refresh");
                }
            })
        $("#myModal").modal("hide");
    }
    function notmaterial(){
        var id=$("#query_designId").text()
        $.ajax({
            type:'POST',
            url:'/design/notmaterial',
            data:'id='+id,
            success:function (){
                $("#tab").bootstrapTable("refresh");
            }
        })
        $("#myModal").modal("hide");
    }
    $(function (){
        $.ajax({
            type:'POST',
            url:'/designModule/queryadmin',
            contentType:'application/json;charset=utf-8',
            success:function (data){
                $("#checker").text(data.loginId)
            }
        })
    })
    function givevalue(row){
        var now = new Date().toLocaleString();
        $("#checkTime").text(now);
        $("#query_designId").text(row.designId);
        $("#designer").val(row.designer);
        $("#productName").text(row.productName);
        $("#query_productId").text(row.productId);
        $("#moduleDescribe").text(row.moduleDescribe);
        $("#tabMaterial").empty();
        $.ajax({
            type:'POST',
            url:'/design/queryModule',
            data:'id='+row.id,
            success:function (mo){
                $.each(mo,function (index,m){
                    $("#tabMaterial").append("<tr>" +
                        "<td>"+m.id+"</td>" +
                        "<td>"+m.productId+"</td>" +
                        "<td>"+m.productName+"</td>" +
                        "<td>"+m.type+"</td>" +
                        "<td>"+m.productDescribe+"</td>" +
                        "<td>"+m.amount+"</td>" +
                        "<td>"+m.amountUnit+"</td>" +
                        "<td>"+m.costPrice+"</td>" +
                        "<td>"+m.subtotal+"</td>" +
                        "</tr>")
                })

            }
        })

    }
</script>
</body>
</html>